<template>
  <div v-loading="loading" class="app-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="titletxt">我的信息：</div>
        <el-card>

          <el-form label-width="130px" :model="formLabelAlign">
            <el-form-item label="真实姓名：">
              <el-input v-model="formLabelAlign.realname"></el-input>
            </el-form-item>
            <el-form-item label="年龄：">
              <el-input v-model="formLabelAlign.age"></el-input>
            </el-form-item>
            <el-form-item label="性别：">
              <el-select v-model="formLabelAlign.gender">
                <el-option v-for="item in genderlist"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">

                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="身份证：">
              <el-input v-model="formLabelAlign.idcard"></el-input>
            </el-form-item>
            <el-form-item label="工作：">
              <el-input v-model="formLabelAlign.work"></el-input>
            </el-form-item>
            <el-form-item label="14天到过城市：">
              <div v-for="(item,index) in formLabelAlign.citys">
                <span style="color: #8c939d"> {{index+1}}: </span>
                <el-cascader
                  :options="citylist"
                  v-model="item.city"
                  expand-trigger="hover"
                >
                </el-cascader>
                <el-button size="mini" @click="formLabelAlign.citys.splice(index,1)" icon="el-icon-delete"
                           type="primary"></el-button>
              </div>
              <el-button size="mini" type="success" @click="addCity">添加</el-button>

            </el-form-item>

            <el-form-item label="密码：">
              <el-input type="password" v-model="formLabelAlign.password"></el-input>
              <el-button size="mini" type="success" @click="dochangepass">保存密码</el-button>

            </el-form-item>
            <el-form-item label="操作">
              <el-button class="el-button--success" @click="savemyinfo">保存</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="8">
        <div class="titletxt">疫苗接种：</div>
        <div v-if="formLabelAlign.userHealth == undefined || formLabelAlign.userHealthReport == undefined">
          <span style="font-size: large;color: #454545">输入个人信息后,请等待医生判断健康情况...</span>
        </div>
        <div v-else>
          <div v-if="formLabelAlign.yimiaoOrderInfo">
            您已预约"{{formLabelAlign.yimiaoOrderInfo.hosptial.name}}"医院，预约时间为： {{formLabelAlign.yimiaoOrderInfo.orderdate}}
          </div>
          <div v-else-if="hasdisease">
            <div>
              抱歉经医生检测，您身体可能患有以下疾病：
            </div>
            <div>
              <el-tag v-if="formLabelAlign.userHealthReport.hb" type="danger">贫血症</el-tag>
              <el-tag v-if="formLabelAlign.userHealthReport.plt" type="danger">血栓</el-tag>
              <el-tag v-if="formLabelAlign.userHealthReport.ly" type="danger">淋巴细胞增多症</el-tag>
              <el-tag v-if="formLabelAlign.userHealthReport.mono" type="danger">单核细胞性白血病</el-tag>
              <el-tag v-if="formLabelAlign.userHealthReport.zam" type="danger">转氨酶过多时肝病</el-tag>
              <el-tag v-if="formLabelAlign.userHealthReport.apky" type="danger">癌症</el-tag>
              <el-tag v-if="formLabelAlign.userHealthReport.ns" type="danger">肾病</el-tag>
              <el-tag v-if="formLabelAlign.userHealthReport.xt" type="danger">糖尿病</el-tag>
              <el-tag v-if="formLabelAlign.userHealthReport.xy" type="danger">高血压</el-tag>
            </div>
            <div>
              暂时不能接种疫苗
            </div>

          </div>
          <div v-else>

            <div v-if="formLabelAlign.age>18
                      && formLabelAlign.age < 59
                      && inDangerPlace == false
                      && (formLabelAlign.work =='医生' || formLabelAlign.work == '护士' ) ">
              您好{{formLabelAlign.work}},请立即就近选择医院打疫苗
              <div style="color: #454545;margin-top: 20px">
                <el-form label-width="120px" :model="formLabelAlign">
                  <el-form-item label="选择医院:">
                    <el-select v-model="orderform.hid">
                      <el-option v-for="item in hosptiallist"
                                 :key="item.id"
                                 :label="item.name"
                                 :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="选择预约时间:">
                    <el-date-picker
                      v-model="orderform.orderdate"
                      type="datetime"
                      placeholder="选择日期时间">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="">
                    <el-button @click="orderhospt" type="primary" size="mini">立即预约</el-button>

                  </el-form-item>
                </el-form>
              </div>

            </div>
            <div v-else-if="formLabelAlign.age>18
                      && formLabelAlign.age < 59
                      && inDangerPlace == false">
              一般打疫苗

              <div style="color: #454545;margin-top: 20px">
                  <el-form label-width="120px" :model="formLabelAlign">
                    <el-form-item label="选择医院:">
                      <el-select v-model="orderform.hid">
                        <el-option v-for="item in hosptiallist"
                                   :key="item.id"
                                   :label="item.name"
                                   :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item label="选择预约时间:">
                      <el-date-picker
                        v-model="orderform.orderdate"
                        type="datetime"
                        placeholder="选择日期时间">
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="">
                      <el-button @click="orderhospt" type="primary" size="mini">立即预约</el-button>

                    </el-form-item>
                  </el-form>
                </div>

            </div>
            <div v-else-if="inDangerPlace==true">
              在高风险地区，不能打疫苗
            </div>
            <div v-else-if="formLabelAlign.age<18
                      || formLabelAlign.age > 59">
              年龄不适宜打疫苗
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="20">
        <div class="titletxt">出行防护提醒：</div>
        <div>
          <span>请选择城市：</span>
          <el-cascader
            :options="citylist"
            v-model="predictcity"
            expand-trigger="hover"
          >
          </el-cascader>
          <div>


            <el-tag type="danger" style="margin-top: 30px;color: red"
                    v-if="predictcity!= undefined &&  predictcity[2]=='533102'">
              该地区为高风险地区，依照国家政策必须持七日内核酸阴性结果方可进入，并且自行隔离14天
            </el-tag>
            <el-tag style="margin-top: 30px" v-if="predictcity != undefined &&  predictcity[2] !='533102'">
              该地区为低风险地区，依照国家政策必须持七日内核酸阴性结果方可进入
            </el-tag>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="20">
        <div class="titletxt" style="margin-top: 20px">疫苗小Tips：</div>
        <div class="infotxt">
          新冠疫苗中灭活疫苗的主要成分是新冠病毒灭活病毒。
        </div>
        <div class="infotxt">
          新冠疫苗中灭活疫苗接种到人体以后会在人体内产生免疫力，可以抵抗外界病毒的侵入，能降低新冠病毒的感染。
        </div>
        <div class="infotxt">
          在接种后30分钟内应该留观，如果出现局部红肿瘙痒等症状，应该及时与医生沟通。
        </div>

        <div class="infotxt">
          2020年1月24日，中国疾控中心成功分离中国首株新型冠状病毒毒种
        </div>
        <div class="infotxt">
          3月16日20时18分，重组新冠疫苗获批启动临床试验
        </div>
        <div class="infotxt">
          4月13日，中国新冠病毒疫苗进入II期临床试验
        </div>
        <div class="infotxt">
          同日，一个由全球120多名科学家、医生、资助者和生产商组成的专家组发表公开宣言，承诺在世界卫生组织协调下，共同努力加快新冠疫苗的研发。
        </div>
        <div class="infotxt">
          6月19日，中国首个新冠mRNA疫苗获批启动临床试验
        </div>
        <div class="infotxt">
          10月8日，中国同全球疫苗免疫联盟签署协议，正式加入“新冠肺炎疫苗实施计划”
        </div>
        <div class="infotxt">
          截至2021年2月25日，中国已经附条件上市的新冠疫苗已经达到4个，其中三个灭活疫苗，一个腺病毒载体疫苗
        </div>
        <div class="infotxt">
          截至3月27日24时，全国累计报告接种新冠病毒疫苗超过一亿剂次
        </div>
        <div class="infotxt">
          4月，中国疾病预防控制中心专家表示：新冠病毒疫苗过敏的比例不高，“过敏体质”、备孕者均可以接种
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {updateMyInfo, getUserBaseInfo, orderHosptial, getHosptialList, changepass, getlastSpiderlog} from '@/api/user'
  import {getToken, setToken, removeToken} from '@/utils/auth'
  import {regionData} from "element-china-area-data";

  export default {
    name: 'login',
    data() {
      return {
        value: new Date(), // 当前月份
        qiandaolist: [],
        myinfo: undefined,
        hasdisease: false,
        inDangerPlace: false,
        orderform: {
          hid: 0,
          orderdate: ""
        },
        hosptiallist: [],
        formLabelAlign: {
          citys: [],
        },
        genderlist: [
          {
            label: "男",
            value: true,
          }, {
            label: "女",
            value: false,
          },
        ],
        loading: true,
        predictcity: undefined,
        citylist: regionData,
        yiqingdata: undefined,
      }
    },
    created() {
      this.getBaseInfo()
      this.gethosptial()
    },

    methods: {
      gethosptial() {
        getHosptialList({}).then(res => {

          this.hosptiallist = res.info
        })
      },
      orderhospt() {
        orderHosptial(this.orderform).then(res => {
          this.$notify({
            type: "success", title: "成功", message: "预约成功！"
          })
        })
      },
      dochangepass() {
        var item = {
          password: this.formLabelAlign.password
        };
        changepass(item).then(res => {
          console.log(res)
          this.$notify({
            title: "成功！",
            message: "修改密码成功！",
            type: "success",
          })
        })
      },
      addCity() {
        this.formLabelAlign.citys.push({city: []})
      },
      savemyinfo() {
        var item = {}
        Object.assign(item, this.formLabelAlign);
        item.citys = JSON.stringify(item.citys)
        updateMyInfo(item).then(res => {
          console.log(res)
          this.$notify({
            title: "成功！",
            message: "保存成功！",
            type: "success"
          })
        })
        this.getBaseInfo()
      },
      getBaseInfo() {
        getUserBaseInfo({}).then(res => {
          this.loading = false;
          this.formLabelAlign = res.info
          if (this.formLabelAlign.citys == undefined || this.formLabelAlign.citys == '') {
            this.formLabelAlign.citys = []
          } else {
            this.formLabelAlign.citys = JSON.parse(this.formLabelAlign.citys)
          }
          if (this.formLabelAlign.userHealthReport) {
            if (
              this.formLabelAlign.userHealthReport.hb == true ||
              this.formLabelAlign.userHealthReport.plt == true ||
              this.formLabelAlign.userHealthReport.ly == true ||
              this.formLabelAlign.userHealthReport.mono == true ||
              this.formLabelAlign.userHealthReport.zam == true ||
              this.formLabelAlign.userHealthReport.apky == true ||
              this.formLabelAlign.userHealthReport.ns == true ||
              this.formLabelAlign.userHealthReport.xt == true ||
              this.formLabelAlign.userHealthReport.xy == true
            )
              this.hasdisease = true;
          }
          this.formLabelAlign.citys.forEach(ele => {
            console.log(ele.city[2])
            if (ele.city[2] == '533102') {
              this.inDangerPlace = true;
            }
          })

        })
      }
    },
  }
</script>
<style scoped>
  .app-container {
    margin-top: 30px;
  }

  .infotxt {
    font-size: medium;
    color: #454545;
    margin: 10px;
  }

  .titletxt {
    font-size: x-large;
    color: #454545;
    margin-bottom: 20px;
  }
</style>
